<template>
  <div>
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-white text-side" :style="{height:  `${sideHeight}px`}">{{ sideName }}</div>
      </el-col>

      <!-- 左侧输入 -->
      <el-col :span="8">
        <div class="grid-content bg-white" v-if="leftNodeList.length == 0"
             :style="{height:  `${itemHeight(0)}px`}"></div>
        <div div v-for="(li, index) in leftNodeList" :key="index" class="grid-content bg-white"
             :style="{height:  `${itemHeight(index)}px`}">
          <div v-for="item in li" :key="item.name">
            <side-node class="side-node" :name="item.name" @clickt="slove(1)" :img="item.img?item.img:'s1.png'"
                       :num="item.num?item.num:0" :calculationId="item.calculationId" :processId="item.processId"
                       :dan="item.dan?item.dan:'kg'" :emissionId="item.emissionId"/>
          </div>
          <div class="add-btn-item" @click="addItem(1, index)" v-if="centerNodeList.length > 0">+ 添加输入</div>
        </div>
      </el-col>

      <!-- 中心节点 -->
      <el-col :span="6">
        <div class="grid-content bg-dark" v-if="centerNodeList.length == 0 && ifAdd">
          <div class="add-btn-center" @click="addItem(3, 0)">+ 添加生产工序</div>
        </div>
        <div class="grid-content bg-dark" v-if="centerNodeList.length == 0 && !ifAdd">
          <div class="add-btn-center2"></div>
        </div>

        <div v-for="(item, index) in centerNodeList" :key="index" class="grid-content bg-dark"
             :style="{height:  `${itemHeight(index)}px`}">
          <div class="center-node" :style="{marginTop:  `${centerMargin(index)}px`}">
            <center-node class="center-node" :name="item.name" @clickt="slove(2)"/>
            <!-- <div class="link-line"></div> -->
            <!-- <div class="link-d3"></div> -->
            <div class="add-btn-center" @click="addItem(3, index)"
                 v-if="centerNodeList.length != 0 && centerNodeList.length == index + 1 && ifAdd">+ 继续添加生产工序
            </div>
          </div>
        </div>
      </el-col>

      <!-- 右侧输出 -->
      <el-col :span="8">
        <div class="grid-content bg-white" v-if="rightNodeList.length == 0"
             :style="{height:  `${itemHeight(0)}px`}"></div>
        <div div v-for="(li, index) in rightNodeList" :key="index" class="grid-content bg-white"
             :style="{height:  `${itemHeight(index)}px`}">
          <div v-for="item in li" :key="item.name">
            <side-node class="side-node" :name="item.name" @clickt="slove(3)" :img="item.img?item.img:'s1.png'"
                       :num="item.num?item.num:0" :calculationId="item.calculationId" :processId="item.processId"
                       :dan="item.dan?item.dan:'kg'" :emissionId="item.emissionId"/>
          </div>
          <div class="add-btn-item" @click="addItem(2, index)" v-if="centerNodeList.length > 0">+ 添加输出</div>
        </div>
      </el-col>

    </el-row>

    <!-- 添加中心节点弹窗 -->
    <el-dialog
      title="中心节点"
      :visible.sync="centerDialogVisible"
      width="30%"
      :before-close="handleCenterClose">
      <div class="formData">
        <normal-form
          :formModel="centerAddFormModel"
          :config="centerAddConfig"
          :plus="centerPlus"/>
      </div>
      <el-button @click="turn(1)">选择已有工序</el-button>
      <span slot="footer" class="form-footer">
          <el-button type="primary" @click="addNode()" class="confirm">确 定</el-button>
          <el-button @click="centerDialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>

    <!-- 添加左节点弹窗 -->
    <el-dialog
      title="左侧节点"
      :visible.sync="leftDialogVisible"
      width="30%"
      :before-close="handleLeftClose">
      <div class="formData">
        <el-button @click="turn(2)">选择已有排放源</el-button>
        <normal-form
          :formModel="leftAddFormModel"
          :config="leftAddConfig"
          :plus="leftPlus"/>

      </div>
      <span slot="footer" class="form-footer">
          <el-button type="primary" @click="addNode()" class="confirm">确 定</el-button>
          <el-button @click="leftDialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>

    <!-- 添加右节点弹窗 -->
    <el-dialog
      title="右侧节点"
      :visible.sync="rightDialogVisible"
      width="30%"
      :before-close="handleRightClose">
      <div class="formData">
        <el-button @click="turn(2)">选择已有排放源</el-button>
        <normal-form
          :formModel="rightAddFormModel"
          :config="rightAddConfig"
          :plus="rightPlus"/>

      </div>
      <span slot="footer" class="form-footer">
          <el-button type="primary" @click="addNode()" class="confirm">确 定</el-button>
          <el-button @click="rightDialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import CenterNode from "../CenterNode"
import SideNode from "../SideNode"
import NormalForm from '@/components/NormalForm'

export default {
  props: {
    sideName: {
      type: String,
      default: ''
    },
    ifAdd: {
      type: Boolean,
      default: true
    },
    centerDefaultName: {
      type: String,
      default: ''
    },
    leftNodeList: {
      type: Array,
      default: function () {
        return []
      }
    },
    centerNodeList: {
      type: Array,
      default: function () {
        return []
      }
    },
    rightNodeList: {
      type: Array,
      default: function () {
        return []
      }
    },

    centerAddFormModel: Object,
    centerAddConfig: Array,
    centerPlus: Object,

    leftAddFormModel: Object,
    leftAddConfig: Array,
    leftPlus: Object,

    rightAddFormModel: Object,
    rightAddConfig: Array,
    rightPlus: Object,

  },
  mounted() {

  },
  components: {
    CenterNode,
    SideNode,
    NormalForm
  },
  methods: {

    turn(num) {
      if (num == 1) {
        this.$router.push({
          path: "/carbonFootprintVerification/carbonFootprintVerification/emissionSource",
          query: {select: true}
        })
      } else if (num == 2) {
        this.$router.push({
          path: "/carbonFootprintVerification/carbonFootprintVerification/processManagement",
          query: {select: true}
        })
      }
    },
    slove(type) {
      if (type == 1) {
        this.leftDialogVisible = true
      } else if (type == 2) {
        this.centerDialogVisible = true
      } else if (type == 3) {
        this.rightDialogVisible = true
      }
    },
    // 父组件可以通过改方法动态添加节点
    refAddNode(foucusIndex, type, name) {
      if (foucusIndex > this.centerNodeList.length - 1) {
        return;
      }
      if (type == "left") {
        this.leftNodeList[foucusIndex].push( // 添加左侧节点
          {name: name}
        )
      } else {
        this.rightNodeList[foucusIndex].push( // 添加左侧节点
          {name: name}
        )
      }
    },
    // 父组件通过改方法获得个子集的高度
    refGetHeightList() {
      if (this.centerNodeList.length == 0) {
        return [-200]
      }
      var heightList = []
      for (var i = 0; i < this.centerNodeList.length; i++) {
        heightList.push(-this.itemHeight(i))
      }
      console.log("heightList: ")
      console.log(heightList)
      return heightList
    },
    addItem(num, index) {
      if (num == 1) { // 添加左侧节点
        this.addStatus = 1
        this.leftDialogVisible = true
      } else if (num == 2) { // 添加右侧节点
        this.addStatus = 2
        this.rightDialogVisible = true
      } else if (num == 3) { // 添加中心节点
        this.addStatus = 3
        this.centerDialogVisible = true
      }
      this.foucusIndex = index
      this.nodeName = ''

    },
    addNode() {
      console.log("add...")
      if (this.addStatus == 1) {
        this.leftDialogVisible = false
        this.leftNodeList[this.foucusIndex].push( // 添加左侧节点
          {name: this.leftAddFormModel.name}
        )
        this.emitModel("left", this.leftAddFormModel)
        Object.keys(this.leftAddFormModel).forEach(key => (this.leftAddFormModel[key] = ''));
      } else if (this.addStatus == 2) { // 添加右侧节点
        this.rightDialogVisible = false
        this.rightNodeList[this.foucusIndex].push(
          {name: this.rightAddFormModel.name}
        )
        this.emitModel("right", this.rightAddFormModel)
        Object.keys(this.rightAddFormModel).forEach(key => (this.rightAddFormModel[key] = ''));
      } else if (this.addStatus == 3) { // 添加中心节点
        this.centerDialogVisible = false
        this.centerNodeList.push(
          {name: this.centerAddFormModel.name}
        )
        this.emitModel("center", this.centerAddFormModel)
        Object.keys(this.centerAddFormModel).forEach(key => (this.centerAddFormModel[key] = ''));
        this.leftNodeList.push([])
        this.rightNodeList.push([])
      }
    },
    // 处理中间表单关闭事件
    handleCenterClose() {
      this.centerDialogVisible = false
    },
    // 处理边缘表单关闭事件
    handleLeftClose() {
      this.leftDialogVisible = false
    },
    handleRightClose() {
      this.rightDialogVisible = false
    },
    // 计算元素高度
    itemHeight(index) {
      var maxHeight
      var length1 = this.leftNodeList[index] ? this.leftNodeList[index].length : 0;
      var length3 = this.rightNodeList[index] ? this.rightNodeList[index].length : 0
      var max_length = Math.max(length1, length3)
      if (max_length == 0) {
        maxHeight = 200
      } else if (max_length == 1) {
        maxHeight = 250
      } else if (max_length == 2) {
        maxHeight = 300
      } else {
        maxHeight = max_length * 100

      }
      return maxHeight
    },
    // 计算中心节点margin
    centerMargin(index) {
      if (index == this.centerNodeList.length - 1) {
        if (Math.max(this.leftNodeList[index].length, this.rightNodeList[index].length) < 2) {
          return 10
        }
      }
      return this.itemHeight(index) / 3
    },
    emitModel(type, model) {
      this.$emit('add', type, model)
    }
  },
  data() {
    return {
      foucusIndex: null, // 当前获得焦点的序列号
      addStatus: 1,
      nodeName: '',
      centerDialogVisible: false,
      rightDialogVisible: false,
      leftDialogVisible: false,
      // // 左侧节点列表
      // leftNodeList:[
      // ],
      // // 中间节点列表
      // centerNodeList:[
      // ],
      // // 右侧节点列表
      // rightNodeList:[
      // ]
    }
  },
  computed: {
    sideHeight() {
      var height = 0
      var max_index = Math.max(this.rightNodeList.length, this.leftNodeList.length, this.centerNodeList.length)
      if (max_index == 0) {
        return this.itemHeight(0)
      } else {
        for (var i = 0; i < max_index; i++) {
          height += this.itemHeight(i)
        }
        return height
      }

    },
  },
  watch: {
    centerDefaultName(nVal, oVal) {
      // 如果设置了中间值，则关闭新增中间节点，并且设置中间节点
      if (this.centerDefaultName != '') {
        console.log("pushing...")
        this.centerNodeList.push(
          {name: this.centerDefaultName}
        )
        this.leftNodeList.push([])
        this.rightNodeList.push([])
      }
    }
  }
}
</script>


<style scoped>
.link-d3 {
  position: absolute;
  right: 50%;
  margin-left: -5px;
  float: left;
  width: 0;
  height: 0;
  border-width: 4px;
  border-style: solid;
  border-color: #6ab89d transparent transparent transparent;
}

.link-line {
  position: absolute;
  right: 50%;
  margin-top: -40px;

  height: 200px;
  width: 1px;
  border: #6ab89d dashed 1px;
}

.text-side {
  color: #a6a6a6;
  text-align: center;
  writing-mode: vertical-lr;
  padding-left: 30px;
  width: 100%;
  font-size: 18px;
}

.grid-content {
  height: 200px;
  border: 2px solid #e5e5e5;
  /* border-bottom:  4px solid #6ab89d; */

  padding-top: 20px;
  position: relative;
}

.add-btn-item {
  text-align: center;
  color: #8c8c8c;
  font-size: 14px;
  position: absolute;
  bottom: 20px;
  right: 40%;
}

.add-btn-center {
  width: 140px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  color: #8c8c8c;
  font-size: 14px;
  border: 1px dashed #d9d9d9;
  padding-top: 20px;
}

.add-btn-center2 {
  width: 140px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  color: #8c8c8c;
  font-size: 14px;
  padding-top: 20px;
}

.font-color-dark {
  color: #8c8c8c;
}

.font-color-light {
  color: #c3c3c3;
}

.title {
  font-size: 20px;
}

.content {
  font-size: 16px;
}

.center {
  margin: 0 auto;
  margin-bottom: 10px;
  text-align: center;
}

.side-node {
  margin-bottom: 20px;
}

.center-node {
  margin-bottom: 20px;
}
</style>
